<!-- 组织管理 -->
<template>
	<div class="bg-ff commonality">
		<el-form :inline="true" :model="params" ref="queryForm">
			<el-form-item label="组织名称">
				<el-input @keyup.enter.native="getList" clearable placeholder="请输入组织名称" v-model="params.name" />
			</el-form-item>
			<el-form-item>
				<el-button @click="getList" class="filter-item" icon="el-icon-search" type="primary">搜索</el-button>
				<el-button @click="reset" icon="el-icon-refresh">重置</el-button>
				<el-button @click="add" icon="el-icon-plus" plain type="primary">新增</el-button>
			</el-form-item>
		</el-form>

		<el-table
			:data="tableData"
			:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
			border
			default-expand-all
			row-key="id"
			size="mini"
			v-loading="loading"
		>
			<el-table-column label="组织名称" min-width="150" prop="name" />
			<el-table-column label="状态" prop="status" width="100">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.status==0">正常</el-tag>
					<el-tag type="info" v-else>禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="负责人" prop="leader" />
			<el-table-column label="联系电话" prop="mobile" />
			<el-table-column label="邮箱" prop="email" />
			<el-table-column label="排序" prop="sort" />
			<el-table-column align="center" label="操作" width="200">
				<template slot-scope="scope" v-if="scope.row.id !== '0'">
					<el-button @click.stop="edit(scope.row)" circle icon="el-icon-edit" plain size="mini" type="primary" />
					<el-button @click.stop="add(scope.row)" circle icon="el-icon-plus" plain size="mini" type="success" />
					<el-button @click.stop="remove(scope.row)" circle icon="el-icon-delete" plain size="mini" type="danger" />
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加或修改组织对话框 -->
		<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="600px">
			<el-form :model="form" :rules="rules" label-width="25%" ref="form" size="mini">
				<el-form-item label="上级组织" prop="parentId">
					<el-cascader
						:options="deptOptions"
						:props="{ emitPath: false, checkStrictly: true, label: 'name', value: 'id' }"
						clearable
						filterable
						placeholder="选择上级组织"
						style="width:100%"
						v-model="form.parentId"
					></el-cascader>
				</el-form-item>

				<el-form-item label="组织名称" prop="name">
					<el-input placeholder="请输入组织名称" v-model="form.name" />
				</el-form-item>

				<el-form-item label="显示排序" prop="sort">
					<el-input-number :min="0" controls-position="right" v-model="form.sort" />
				</el-form-item>

				<el-form-item label="负责人" prop="leader">
					<el-input maxlength="20" placeholder="请输入负责人" v-model="form.leader" />
				</el-form-item>

				<el-form-item label="联系电话" prop="mobile">
					<el-input maxlength="11" placeholder="请输入联系电话" v-model="form.mobile" />
				</el-form-item>

				<el-form-item label="邮箱" prop="email">
					<el-input maxlength="50" placeholder="请输入邮箱" v-model="form.email" />
				</el-form-item>

				<el-form-item label="公司/部门">
					<el-radio-group v-model="form.type">
						<el-radio :label="1">公司</el-radio>
						<el-radio :label="2">部门</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="是否为组织树节点">
					<el-radio-group v-model="form.isTreeNode">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="组织状态">
					<el-radio-group v-model="form.status">
						<el-radio :label="0">正常</el-radio>
						<el-radio :label="1">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button @click="submit" type="primary">确 定</el-button>
				<el-button @click="dialog.visible=false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import Api from './api'
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      deptOptions: [],
      params: {
        queryMode: '1',
        name: undefined
      },
      dialog: {
        title: undefined,
        visible: false
      },
      form: {},
      rules: {
        parentId: [
          { required: true, message: '上级组织不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '组织名称不能为空', trigger: 'blur' }
        ],
        mobile: [
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: "'请输入正确的邮箱地址", trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取组织列表
    getList() {
      this.loading = true
      Api.getDeptList(this.params).then(data => {
        this.tableData = data.records
      }).finally(() => { this.loading = false })
    },
    // 重置查询条件,并重新获取数据
    reset() {
      this.params = {
        name: undefined,
        queryMode: 'tree'
      }
      this.getList()
    },
    // 新增组织
    add(row) {
      this.resetForm()
      // 设置弹框标题，显示弹框
      this.dialog = { title: '新增组织', visible: true }
      // 获取组织下拉
      this.loadDeptOptions()
      // 点击表格内的组织新增时默认带出父级组织
      if (row) {
        this.form.parentId = row.id
      }
    },
    edit(row) {
      this.resetForm()
      // 设置弹框标题，显示弹框
      this.dialog = { title: '修改组织', visible: true }
      // 获取组织下拉
      this.loadDeptOptions()
      // 获取组织详情
      Api.getDeptDetail(row.id).then(data => {
        this.form = data
      })
    },
    // 提交
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 有id 代表修改组织信息
          Api.addOrUpdateDept(this.form).then(() => {
            this.$message.success(this.form.id ? '修改成功' : '新增成功')
            this.dialog.visible = false
            this.getList()
          })
        }
      })
    },
    // 删除组织
    remove(row) {
      const ids = [row.id || this.ids]
      this.$confirm('确认删除已选中的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Api.removeDepts(ids).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => this.$message.info('已取消删除'))
    },
    // 重置表单,会监听弹框关闭时调用
    resetForm() {
      this.form = {
        parentId: undefined,
        name: undefined,
        sort: 1,
        leader: undefined,
        mobile: undefined,
        email: undefined,
        type: 1,
        isTreeNode: 0,
        status: 1
      }
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    },
    // 获取组织下拉框
    loadDeptOptions() {
      this.deptOptions = []
      Api.getDeptList({ queryMode: '0' }).then(data => {
        this.deptOptions = data.records
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dept-container {
	&__form {
		.warning-row {
			background: oldlace;
		}

		.success-row {
			background: #f0f9eb;
		}
	}
}
</style>
